<template lang="pug">
div.loginBackground
  div.loginBox
    div.title
      span.loginImg
      span 用户名密码登录
      span(@click="close").close
    input(v-model='username' placeholder="用户名")
    input(v-model="password" placeholder="密码")
    div.automatic-box
      input(type="checkbox").checkbox
      span.automatic-login 下次自动登录
    button.button(@click="clickLogin()") 登入
    div.help
      span 忘记密码？
      span 短信快捷登录
    transition(name='ToggleShow')
      div(v-show='isErrorMsg').error-msg {{errorMsg}}
    div.foot
      span
        span 扫码登录
        span.cut-off-line
        span.qq
        span.WeiBo
      span 注册
</template>

<script>
export default {
  name: 'loginBox',
  props: ['isShow'],
  data () {
    return {
      loginName: '',
      username: '',
      password: '',
      verification: '',
      isErrorMsg: false,
      errorMsg: 'AAA'
    }
  },
  mounted () {
    // 获取密码校验
    this.$http.get('https://www.easy-mock.com/mock/5afda4e3c088691e06a6ab69/BaiDu-Vue/longName').then((s) => {
      this.verification = s.data.data.password
    })
  },
  methods: {
    close () {
      // 子组件给父组件传递回调 方法和参数 top 组建组件
      this.$emit('Close', false)
    },
    // 单击登入按钮
    clickLogin () {
      // 判断是否输入账号
      if (this.username === '') {
        this.errorMsg = '请输入用户名'
        this.isErrorMsg = true
        setTimeout(() => {
          this.isErrorMsg = false
        }, 2000)
      } else {
        // 如何账号密码正确进行跳转
        if (this.verification === this.password) {
          this.$router.push({path: '/BaiDuLogin'})
        } else { // 显示错误提示
          this.errorMsg = '密码错误'
          this.isErrorMsg = true
          setTimeout(() => {
            this.isErrorMsg = false
          }, 2000)
        }
      }
    }
  }
}
</script>

<style scoped lang="stylus">
.loginBackground
  background rgba(0,0,0,0.7)
  position fixed
  left 0
  right:0
  top:0
  bottom 0
  z-index 1
  .loginBox
    width: 310px
    height 400px
    background white
    border 1px solid grey
    position absolute
    left 0
    right:0
    top:0
    bottom:0
    margin auto
    padding 20px 20px
    text-align center
    .title
      margin-bottom 41px
      display: flex
      justify-content flex-start
      span
        height 32px
        width:120px
        font-size: 16px;
        display: flex;
        align-items flex-end
      .loginImg
        width:120px
        background url("../../../../static/img/home/loginlogo.png") no-repeat
      .close
        background url("../../../../static/img/home/close-icon.png") no-repeat
        height: 16px
        width: 16px
        background-size contain
        position: absolute
        top: 10px
        right 10px
        cursor: pointer
        &:hover
          background url("../../../../static/img/home/close-icon2.png") no-repeat
          background-size contain
    input
      width: 284px
      height: 20px
      padding:8px
      font-size 14px
      margin-bottom 15px
      display: block
    .automatic-box
      text-align left
      .checkbox
        width 13px
        height:13px
        display: inline-block
      .automatic-login
        display: inline;
        color: #666;
        font-size: 12px;
        margin-left: 5px;
        vertical-align top
    .button
      text-decoration none
      text-align center
      display: block;
      background-color: #3f89ec;
      height: 40px;
      line-height: 40px;
      width: 300px;
      color: white;
      border none
      border-radius 3px
      font-size: 16px;
      font-weight: 800;
      cursor pointer
      outline none
      &:active
        background-color #4490f7
    .help
      margin-top 15px
      display flex
      justify-content space-between
    .ToggleShow-enter-active
      transition-duration 1s
    .ToggleShow-leave-active
      transition-duration 1s
    .ToggleShow-enter,.ToggleShow-leave-to
      opacity: 0;
    .error-msg
      background-color rgba(0,0,0,0.7)
      color white
      font-size 18px
      padding 5px 15px
      display: inline-block
    .foot
      height: 60px
      position: absolute
      bottom 0
      left:0
      right:0
      background: #f0f6ff;
      color: #2e82ff;
      padding 0 25px
      display: flex
      justify-content space-between
      span
        height:60px
        line-height 60px
      .cut-off-line
        height:10px
        width:1px
        background-color #2e82ff
        display: inline-block
        margin 0 20px
      .qq
        background: url("../../../../static/img/home/login-nav-icon.png") no-repeat
        background-position: -6px -55px;
        height: 18px;
        width: 18px
        display: inline-block
        vertical-align middle
      .WeiBo
        margin-left 10px
        background: url("../../../../static/img/home/login-nav-icon.png") no-repeat
        background-position: -55px -33px;
        height: 18px;
        width: 18px
        display: inline-block
        vertical-align middle
</style>
